<template>
	<view>
		<view class="card">
			<image class="vcard" :src="card.picture" mode="widthFix"></image>
		
			<!-- 二维码 -->
			<image class="qrcode" src="../../../static/images/qrcode.png" style="width: 40rpx;height: 40rpx;" @click="make"></image>
			<u-mask :show="qrcodeShow" @click="qrcodeShow = false" :custom-style="{ display: 'flex', 'justify-content': 'center', 'align-items': 'center' }">
				<view class="qr-container">
					<view class="margin-tb text-center">扫描此码查看/添加我的名片</view>
		
					<view class="qrimg">
            <image :src="wxacode" style="width: 300rpx;height: 300rpx;" mode=""></image>
						<!-- <tki-qrcode ref="qrcode" :val="wxacode" :showLoading="false" :loadMake="true" :onval="true" :size="400" /> -->
					</view>
				</view>
			</u-mask>
		</view>
		
		<!-- 发送名片 -->
		<view class="padding-tb padding-lr-xl">
			<!-- <view class="text-sm text-blue text-right" @click="$goto('/pages/cards/list')">名片管理</view> -->
			<my-btn class="margin-top" radius :width="420" @click="$goto('/pages/cards/list')">发送名片</my-btn>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		props: {
			card: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				qrcodeShow: false,
        wxacode: ''
			};
		},
    mounted() {
      this.getCode()
    },
		methods: {
			make() {
				this.qrcodeShow = true
			},
      async getCode() {
        let res = await this.$u.get('/myvcard/wxacode?id=' + this.card.id)
        let { wxacode } = res.data.result
        this.wxacode = wxacode
      }
		}
	}
</script>

<style lang="scss">
	.card {
		width: 670rpx;
		background: transparent;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: -230rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		position: relative;
		overflow: hidden;
		
		.vcard {
			width: 100%;
			height: auto;
			box-shadow: 0rpx 5rpx 20rpx 1rpx rgba(0, 0, 0, 0.08);
		}
	}

	.qrcode {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.qr-container {
		width: 550rpx;
		padding: 32rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrimg {
		margin: 32rpx auto;
	}
</style>
